<template>
  <div class="fillcontain" v-loading="loading">
    <bt-col-header title="渠道管理"></bt-col-header>
    <div class="page-content">
      <el-form :model="dataForm" @keyup.enter.native="getDataList()" class="" label-width="80px">
        <el-form-item label="渠道名称" class="col-md-4">
          <el-input v-model="dataForm.channelName" placeholder="渠道名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="渠道编码" class="col-md-4">
          <el-input v-model="dataForm.channelCode" placeholder="渠道编码" clearable></el-input>
        </el-form-item>
        <div class="row contain-padding">
          <div class="col-md-12 text-center mt-2">
            <rich-button :plain="true" type="info" shape="capsule" icon='search' @click="getDataList()">查询</rich-button>
            <rich-button  :plain="true" type="info" shape="capsule" @click="useRemark">使用说明</rich-button>
          </div>
        </div>
      </el-form>

      <div class="">
        <!-- 操作按钮 -->
        <!-- <el-row>
          <el-col :span="24" class="pb15 pt5">
            <el-button  type="danger" size="mini" style="margin-left: 10px;" plain @click="addOrUpdateHandle()">新增</el-button>
          </el-col>
        </el-row> -->
        <div class="btn-padding left">
          <el-button :plain="true" type="info" icon="circle-plus" @click="addOrUpdateHandle()">新增</el-button>
        </div>

        <!-- 查询结果列表 -->
        <div class="table_container">
          <!-- 列表 -->
          <el-table
            :data="dataList"
            border
            style="width: 100%; ">
            <el-table-column
              type="index"
              header-align="center"
              width="50"
              label="序号" >
            </el-table-column>
            <el-table-column
              prop="channelName"
              header-align="center"
              align="center"
              width="120"
              label="渠道名称">
            </el-table-column>

            <el-table-column
              prop="channelCode"
              header-align="center"
              align="center"
              label="渠道编码">
            </el-table-column>
            <el-table-column
              prop="publicKey"
              header-align="center"
              align="center"
              label="公钥">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="viewPublicKey(scope.row.publicKey)">查看</el-button>
              </template>
            </el-table-column>
            <el-table-column
              prop="privateKey"
              header-align="center"
              align="center"
              label="私钥">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="viewPrivateKey(scope.row.privateKey)">查看</el-button>
              </template>
            </el-table-column>

            <el-table-column
              header-align="center"
              align="center"
              width="150"
              label="操作">
              <template slot-scope="scope">
                <el-button v-if="isAuth('channel:edit')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
                <el-button v-if="isAuth('channel:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            class="float-right mt-2"
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="page.pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="page.pageSize"
            :total="page.totalPage"
            layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </div>
    </div>
    





    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>

    <el-dialog
      title="公钥"
      :visible.sync="showPublicKey"
      width="60%">
      <span class="keys">{{publicKey}}</span>
      <span slot="footer" class="dialog-footer">
    <el-button :plain="true" type="info" @click="showPublicKey = false">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog
      title="私钥"
      :visible.sync="showPrivateKey"
      width="60%">
      <span class="keys">{{privateKey}}</span>
      <span slot="footer" class="dialog-footer">
    <el-button :plain="true" type="info" @click="showPrivateKey = false">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog
      title="说明"
      :visible.sync="showRemark"
      width="60%">
      <el-row>
        <p>一、根据第三方信息新建渠道，生成密钥对和渠道编码。提供密钥和渠道编码,以及工具类RSASignature.java和报文对象ReqVo.java给第三方。</p>
        <p>二、第三方拿到密钥和渠道编码进行报文封装</p>
        <pre>
            String str = "接口报文";
            String channelCode = "CH202012221507000000000001";//渠道编码
            String visitCode = "invokeCreate";//对应的接口标识
            String transactionNo = "06bba8edb0838a4acf39c700ed2c0a6c";//唯一流水号

            Map params = new HashMap();
            params.put("body", str);
            params.put("channelCode", channelCode);
            params.put("visitCode", visitCode);
            params.put("transactionNo", transactionNo);

            //step1: 排序
            String content = RSASignature.getContent(params);

            //step2: 签名
            String signstr = RSASignature.sign(content, privateKey);

            //step3: 私钥加密
            String cipher = encipher(content, privateKey);

            ReqVo vo = new ReqVo();
            vo.setSign(signstr);//签名
            vo.setBody(cipher);//加密后的报文
            vo.setChannelCode(channelCode);
            vo.setVisitCode(visitCode);
            vo.setTransactionNo(transactionNo);

            //step4: 请求接口

        </pre>

      </el-row>


      <span slot="footer" class="dialog-footer">
      <el-button :plain="true" type="info" @click="showPrivateKey = false">确 定</el-button>
    </span>
    </el-dialog>

  </div>
</template>

<script>
  import { pageList, del } from '@/api/channel'
  import AddOrUpdate from './add-or-update'

  export default {
    data () {
      return {
        loading: false,
        showPublicKey: false,
        showRemark: false,
        showPrivateKey: false,
        dataForm: {
          channelName: '',
          channelCode: ''
        },
        dataList: [],
        publicKey: '',
        privateKey: '',
        dataListLoading: false,
        addOrUpdateVisible: false,
        page: {
          pageIndex: 1,
          pageSize: 10,
          totalPage: 0
        }
      }
    },
    components: {
      AddOrUpdate
    },
    activated () {
      this.getDataList()
    },
    methods: {
      useRemark () {
        this.showRemark = true
      },
      viewPublicKey (data) {
        this.publicKey = data
        this.showPublicKey = true
      },
      viewPrivateKey (data) {
        this.privateKey = data
        this.showPrivateKey = true
      },
      // 每页数
      sizeChangeHandle (val) {
        this.page.pageSize = val
        this.page.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.page.pageIndex = val
        this.getDataList()
      },
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        let params = {
          pageNumber: this.page.pageIndex,
          pageSize: this.page.pageSize,
          channelName: this.dataForm.channelName,
          channelCode: this.dataForm.channelCode
        }
        pageList(params).then(res => {
          this.dataListLoading = false
          this.dataList = res.data.data.list
          this.page.totalPage = res.data.data.totalCount
        })
      },
      // 新增 / 修改
      addOrUpdateHandle (id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      // 删除
      deleteHandle (id) {
        this.$confirm(`确定对[id=${id}]进行[删除]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = {
            id: id + ''
          }
          del(params).then(res => {
            if (res.data && res.data.resultCode === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(res.data.resultMsg)
            }
          })
        }).catch(() => {})
      }
    }
  }
</script>
<style>
  body .el-table th.gutter {
    display: table-cell !important
  }
  .keys{
    word-wrap: break-word;
    word-break: normal;
  }
</style>
